<template>
  <div>
    <el-dialog
      width="700px"
      v-model="zjdgPayInfo.dialogShow"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex justify-center items-center bg-white">
          <div class="" style="font-size: 16px">对公支付</div>
          <div
            @click="zjdgPayInfo.dialogShow = false"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="flex flex-col justify-center items-center">
        <div class="flex items-center">
          <div class="w-[200px]">收款账号：</div>
          <div class="w-[300px]">{{ zjdgPayInfo.bank_cardno }}</div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="w-[200px]">收款户名：</div>
          <div class="w-[300px]">{{ zjdgPayInfo.bank_account_name }}</div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="w-[200px]">开户行</div>
          <div class="w-[300px]">{{ zjdgPayInfo.bank_name }}</div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="w-[200px]">支付金额：</div>
          <div class="w-[300px] text-red-500 font-bold">{{ zjdgPayInfo.premium }}</div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="w-[200px]">付款凭证：</div>
          <div v-if="zjdgPayInfo.bank_file" class="relative w-[300px]">
            <el-image
              :src="zjdgPayInfo.bank_file"
              fit="fill"
              :lazy="true"
              class="w-[178px] h-[100px] rounded-[5px]"
              :preview-src-list="previewList"
            ></el-image>
            <div
              class="absolute top-[-5px] right-[110px] cursor-pointer"
              @click="clearImage"
            >
              <el-icon color="red"><Close /></el-icon>
            </div>
          </div>

          <div class="w-[300px]" v-else>
            <el-upload
              class="w-[178px]"
              action="#"
              drag
              :http-request="httpRequest"
              :show-file-list="false"
            >
              <!-- <img v-if="imageUrl" :src="imageUrl" class="w-[178px] h-[100px]" /> -->
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </div>
        <div class="flex items-center mt-[20px]">
          <div class="">
            <el-button type="primary" size="default" @click="submit">提交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  defineProps,
  watchEffect,
  inject,
  defineEmits,
  computed,
  reactive,
} from "vue";
import OSS from "ali-oss";
import { ElMessage, ElMessageBox } from "element-plus";
import type { TableInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { orderDel, cancelDadi, corpFile } from "@/utils/api";
import getAssetsFile from "@/utils/getImageurl.ts";
const props = defineProps({
  zjdgPayInfo: {} as any,
});
const router = useRouter();
const route = useRoute();

const imageUrl = ref("");
const global = inject<any>("global");
const message = inject<any>("message");
const previewList = ref([]) as any;
const clearImage = () => {
  props.zjdgPayInfo.bank_file = "";
  previewList.value = [];
};
//上传照片
const httpRequest = (v: any) => {
  //index 0是营业执照，1是身份证正面 2是反面

  // console.log(v);

  let e = v.file;
  var arr = e["name"].split(".");
  imageUrl.value = "";
  previewList.value = [];
  var img_type = arr[1];
  let client = new OSS({
    region: global.region,
    //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
    accessKeyId: global.accessKeyId,
    accessKeySecret: global.accessKeySecret,
    bucket: global.bucket,
  });
  //获取当前时间
  var date = new Date();
  var file_name =
    date.getFullYear() +
    "/" +
    (date.getMonth() + 1) +
    "/" +
    date.getDate() +
    "/" +
    date.getHours() +
    "_" +
    date.getMinutes() +
    "_" +
    date.getSeconds() +
    "_" +
    date.getMilliseconds();
  let filename = e["name"];

  let res_file = e;
  let progre = "";
  async function put() {
    try {
      //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
      let result = await client
        .multipartUpload(filename, res_file, {
          progress: () => {
            //console.log(percentage); // 上传文件进度
          },
        })
        .then(async (res: any) => {
          message.success("上传成功");
          props.zjdgPayInfo.bank_file = global.oss_url + res.name;
          previewList.value.push(imageUrl.value);
          //that.$emit("change", res.name);
        })
        .catch((_: any) => {
          message.warning("图片上传失败");
          //return that.toast(0, "上传失败");
        });
    } catch (e) {
      message.warning("图片上传失败");
    }
  }

  put();
};
//提交
const submit = async () => {
  if (!props.zjdgPayInfo.bank_file) return message.warning("请上传凭证");
  let p = {
    id: route.query.order_id,
    bank_file: props.zjdgPayInfo.bank_file,
  };
  const res = await corpFile(p);

  if (res.code == 1) {
    message.success(res.msg);
    props.zjdgPayInfo.dialogShow = false;
    setTimeout(() => {
      router.push("/index/person/orderPay?type=0&parentIndex=0");
    }, 500);
  } else {
    message.warning(res.msg);
  }
};
</script>
<style scoped lang="scss">
// :deep(.el-upload-dragger) {
//   padding: 0 !important;
//   border: none !important;
// }
</style>
